<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue学习</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div>
        <input
          type="text"
          @keyup.enter="onEnter"
          placeholder="请输入任务内容"
        />
      </div>
      <hr />
      <ul>
        <li v-for="item,index in todos" :key="item.id">
          <span>{{item.value}}</span> --
          <button @click="delTodo(item.id)">删除</button> --
          <button @click="delTodoIndex(index)">删除Index</button>
        </li>
      </ul>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            // 任务列表数据源
            // [{id:1,value:'任务名称'}]
            todos: []
          }
        },
        methods: {
          onEnter(e) {
            // 获取输入框中的数据
            let value = e.target.value?.trim()
            // 清空输入框中的内容
            e.target.value = ''
            // 向数据源中的todos属性添加一条记录
            let todo = {
              // 使用当前时间戳作为唯一id
              id: Date.now(),
              // value: value
              value
            }
            // 通过 数组中的push方法来完成对数据的追加
            // 注：vue中对于push这样的方法它进行了增强，它在追加的同步还会通知视图更新
            // https://cn.vuejs.org/guide/essentials/list.html#array-change-detection
            this.todos.push(todo)
          },
          delTodo(id) {
            const todos = this.todos.filter((val) => val.id != id)
            // 重新给数据进行赋值，触发set,set就会更新视图
            this.todos = todos
          },
          delTodoIndex(index) {
            // 从指定的索引删除1个
            this.todos.splice(index, 1)
          }
        }
      })
      app.mount('#app')
    </script>
  </body>
</html>
